<template>
  <div ref="print">
    <!-- 查询 -->
    <el-popover placement="bottom-start" trigger="click" >
      <el-form :inline="true" :model="searchList" label-width="80px" class="search-panle">
        <el-form-item label="小样号" class="noMargin"><el-input v-model="searchList.smallNo" ></el-input></el-form-item>
        <el-form-item label="患者姓名" class="noMargin"><el-input v-model="searchList.name" ></el-input></el-form-item>
        <el-form-item label="创建日期" class="noMargin"> <el-date-picker v-model="searchList.time" type="date" placeholder="选择日期" class="noMargin"></el-date-picker></el-form-item>
        <el-button type="primary" @click="searchData" class="searchBtn">提交</el-button>
      </el-form>
      <el-button slot="reference" type="primary" >查询</el-button>
      <el-button slot="reference" @click="ceditDialog = true" type="primary" style="float:right;" >操作</el-button>
    </el-popover>
    <!-- 表格 -->
    <!-- <el-table :data="tableData" stripe border class="company-table" :height="tableHeight" v-loading="loading" v-show="true">
      <el-table-column fixed type="index" label="*"  align="center" min-width="40"></el-table-column>
      <el-table-column prop="sampleNo" label="小样号"  min-width="130"></el-table-column>
      <el-table-column prop="name" label="患者姓名"  min-width="110"></el-table-column>
      <el-table-column prop="inspectionRecodePersonName" label="检验记录人"  min-width="110"></el-table-column>
      <el-table-column prop="recodeStatusName" label="检验状态"  min-width="110"></el-table-column>
      <el-table-column fixed="right" label="操作" align="center" min-width="75">
          <template slot-scope="scope">
              <el-button  @click="updateDialog(scope.row)" type="text" size="small"> {{ scope.row.inspectionStatus !='1' ? '编辑' : '详情'  }} </el-button>
          </template>
      </el-table-column>
    </el-table>
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
    -->
    <el-tabs v-model="mainActiveName" @tab-click="syschRecodeStatus">
      <el-tab-pane label="待检验" name="0">
        <div class="divTop" :style="{'height':(divAutoHeight-120)+'px','overflow-y':'auto'}">
          <ul>
              <li v-for="item in tableData" class="showDataLi">
                <div class="showDataTop">
                  <div class="showDataTopLeft">
                    <img v-if="item.providerInfo.photo" :src="'data:image/png;base64,'+ item.providerInfo.photo" class="showDataImg" />
                  </div>
                  <div class="showDataTopCenter">
                    <div style="width:99%;height:30px;">
                        <div style="font-size:16px;font-weight:bolder;float:left;">
                            {{item.providerInfo.name}}
                        </div>
                        <div  style="font-size:13px;color:gray;float:left;margin-left:5px;margin-top:3px;">
                            {{item.providerInfo.sex === '1'? '男':'女'}}&nbsp;{{item.providerInfo.age}}岁
                        </div>
                    </div>
                    <div style="width:99%;height:70px;font-size:13px;color:gray;">
                      <div>小样号：{{item.sampleNo}}</div>
                      <div style="margin-top:3px;">病案号：{{item.providerInfo.cardId}}</div>
                      <div style="margin-top:3px;">检验护士：{{item.inspectionRecodePersonName}}</div>
                      <div style="margin-top:3px;">检验时间：{{item.recodeEndTime}}</div>
                    </div>
                  </div>
                  <div class="showDataTopRight">
                    <div   v-if="item.state == 1"  style="width:50px;height:18px;font-size:10px;color:white;background:#B7B7B7;margin:0px auto;margin-top:20px;border-radius: 10px;">
                      已检验
                    </div>
                    <div   v-if="item.state != 1 "  style="width:50px;height:18px;font-size:10px;color:white;background:#03BC89;margin:0px auto;margin-top:20px;border-radius: 10px;">
                      待检验
                    </div>
                  </div>

                </div>
                <div class="showDataFoot" @click="updateDialog(item)">
                     {{ item.inspectionStatus !='1' ? '编辑' : '详情'  }}
                </div>
              </li>        
          </ul>
        </div>
        <div class="divfooter">
           <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="已检验" name="1">
        <div class="divTop" :style="{'height':(divAutoHeight-120)+'px','overflow-y':'auto'}">
          <ul>
              <li v-for="item in tableData" class="showDataLi">
                <div class="showDataTop">
                  <div class="showDataTopLeft">
                    <img v-if="item.providerInfo.photo" :src="'data:image/png;base64,'+ item.providerInfo.photo" class="showDataImg" />
                  </div>
                  <div class="showDataTopCenter">
                    <div style="width:99%;height:30px;">
                        <div style="font-size:16px;font-weight:bolder;float:left;">
                            {{item.name}}
                        </div>
                        <div  style="font-size:13px;color:gray;float:left;margin-left:5px;margin-top:3px;">
                            {{item.providerInfo.sex === '1'? '男':'女'}}&nbsp;{{item.providerInfo.age}}岁
                        </div>
                    </div>
                    <div style="width:99%;height:70px;font-size:13px;color:gray;">
                      <div>小样号：{{item.sampleNo}}</div>
                      <div style="margin-top:3px;">病案号：{{item.providerInfo.cardId}}</div>
                      <div style="margin-top:3px;">检验护士：{{item.inspectionRecodePersonName}}</div>
                      <div style="margin-top:3px;">检验时间：{{item.recodeEndTime}}</div>
                    </div>
                  </div>
                  <div class="showDataTopRight">
                    <div   v-if="item.state == 1"  style="width:50px;height:18px;font-size:10px;color:white;background:#B7B7B7;margin:0px auto;margin-top:20px;border-radius: 10px;">
                      已检验
                    </div>
                    <div   v-if="item.state != 1 "  style="width:50px;height:18px;font-size:10px;color:white;background:#03BC89;margin:0px auto;margin-top:20px;border-radius: 10px;">
                      待检验
                    </div>
                  </div>

                </div>
                <div class="showDataFoot" @click="updateDialog(item)">
                     {{ item.inspectionStatus !='1' ? '编辑' : '详情'  }}
                </div>
              </li>        
          </ul>
       </div> 
       <div class="divfooter">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>       
       </div>       
      </el-tab-pane>
      
    </el-tabs>
    <!-- 详情 -->
    <el-dialog :title="dialog.title" :visible.sync="dialog.isShow" width="1080px" top="40px" :close-on-click-modal="false" class="dialog-form">
        <el-tabs v-model="dialogActiveName">
          <el-tab-pane label="基本信息" name="0">
                <h3 class="dialog-plate-title"><span>基本信息</span></h3>
                <!-- 客户基本信息 -->
                <pulpwork-info v-bind:cardid="dialogData.providerNo"></pulpwork-info>
            </el-tab-pane>  
             <el-tab-pane label="化检项目" name="1">
              
              <h3 class="dialog-plate-title"><span>化检项目</span></h3>
              <el-form   :inline="true" :model="dialogData" label-width="120px">
                <el-form-item label="白细胞计数" prop="wbc" ><el-input v-model="dialogData.wbc"></el-input></el-form-item>
                <el-form-item label="血小板" prop="platelet" ><el-input v-model="dialogData.platelet"></el-input></el-form-item>
                <el-form-item label="HCT" prop="hct" ><el-input v-model="dialogData.hct"></el-input></el-form-item>
                <el-form-item label="甘油三脂" prop="triglyceride" ><el-input v-model="dialogData.triglyceride"></el-input></el-form-item>
                <el-form-item label="LP" prop="lp" ><el-input v-model="dialogData.lp"></el-input></el-form-item>
                <el-form-item label="SOD" prop="sod" ><el-input v-model="dialogData.sod"></el-input></el-form-item>
                <el-form-item label="MDA" prop="mda" ><el-input v-model="dialogData.mda"></el-input></el-form-item>
                <el-form-item label="低密脂蛋白" prop="ldl" ><el-input v-model="dialogData.ldl"></el-input></el-form-item>
                <el-form-item label="胆固醇" prop="cholesterol" ><el-input v-model="dialogData.cholesterol"></el-input></el-form-item>

                <el-form-item label="全血比重"><el-select v-model="dialogData.wholeBloodLevel" class="selectW200"><el-option value="" label="【空】"></el-option><el-option v-for="item in codeData18" :key="item.code" :value="item.code" :label="item.name"></el-option></el-select></el-form-item>
                <el-form-item label="蛋白含量"><el-input v-model="dialogData.proteinLevel" ></el-input></el-form-item>
                <el-form-item label="血清蛋白含量"><el-input v-model="dialogData.serumProteinLevel" ></el-input></el-form-item>
                <el-form-item label="血红蛋白含量"><el-select v-model="dialogData.hemoglobinLevel" class="selectW200"><el-option value="" label="【空】"></el-option><el-option v-for="item in codeData17" :key="item.code" :value="item.code" :label="item.name"></el-option></el-select></el-form-item>
                <el-form-item label="HBsAg"><el-select v-model="dialogData.hbsAg" class="selectW200"><el-option v-for="item in codeData20" :key="item.code" :value="item.code" :label="item.name"></el-option></el-select></el-form-item>
                <el-form-item label="抗-HCV"> <el-select v-model="dialogData.hcv" class="selectW200"><el-option v-for="item in codeData20" :key="item.code" :value="item.code" :label="item.name"></el-option></el-select></el-form-item>
                <el-form-item label="梅毒"><el-select v-model="dialogData.syphilis" class="selectW200"><el-option v-for="item in codeData20" :key="item.code" :value="item.code" :label="item.name"></el-option></el-select></el-form-item>
                <el-form-item label="抗-HIV"><el-select v-model="dialogData.hiv" class="selectW200"><el-option v-for="item in codeData20" :key="item.code" :value="item.code" :label="item.name"></el-option></el-select></el-form-item>
                <el-form-item label="ALT"><el-select v-model="dialogData.alt" class="selectW200"><el-option value="" label="【空】"></el-option><el-option v-for="item in codeData21" :key="item.code" :value="item.code" :label="item.name"></el-option></el-select></el-form-item>
                <el-form-item label="血型"><el-select v-model="dialogData.bloodType" class="selectW200"><el-option value="" label="【空】"></el-option><el-option v-for="item in codeData12" :key="item.code" :value="item.code" :label="item.name"></el-option></el-select></el-form-item>
                <el-form-item label="化检备注"><el-input v-model="dialogData.inspectionRemark" type="textarea" class="checkNote" :rows="1"></el-input></el-form-item>
                <el-form-item>
                  <template>
                      <el-button v-if="dialogData.inspectionStatus !='1' " type="primary" @click="submitDialog">提交</el-button>
                  </template>
                </el-form-item>
              </el-form>
              <!-- <div slot="footer">
                  <el-button v-if="dialogData.inspectionStatus !='1' " type="primary" @click="submitDialog">提交</el-button>
              </div> -->
           </el-tab-pane>  
        </el-tabs>
      <div :style="{'height':(tableHeight-90)+'px','overflow-y':'auto'}">
  
        <!-- <h3 class="dialog-plate-title" ><span>小样信息</span></h3>
        <el-form :inline="true" :model="dialogData" label-width="120px">
          <el-form-item label="小样号"><el-input v-model="dialogData.sampleNo" disabled></el-input></el-form-item>
          <el-form-item label="小样类型"><el-input v-model="dialogData.sampleTypeFormatter" disabled></el-input></el-form-item>
          <el-form-item label="认证方式"><el-input v-model="dialogData.authMethodFormatter " disabled></el-input></el-form-item>
          <el-form-item label="采集时间"><el-input v-model="dialogData.gatheringTime" disabled></el-input></el-form-item>
          <el-form-item label="采集地点"><el-input v-model="dialogData.gatheringPlaceFormatter" disabled></el-input></el-form-item>
          <el-form-item label="记录时间"><el-input v-model="dialogData.recodeTIme" disabled></el-input></el-form-item>
          <el-form-item label="创建护士"><el-input v-model="dialogData.createNurseName" disabled></el-input></el-form-item>
        </el-form> -->

        <!--
         <h3 class="dialog-plate-title" ><span>化检详情</span></h3>
         <el-form  :inline="true" :model="dialogData" label-width="120px">
          <el-form-item label="化检结果">
            <el-select v-model="dialogData.inspectionResult" class="selectW200">
              <el-option value="" label="【空】"></el-option>
              <el-option v-for="item in codeData18" :key="item.code" :value="item.code" :label="item.name"></el-option>
              </el-select>
            </el-form-item>
          <el-form-item label="" >
            <el-radio-group v-model="dialogData.ym" disabled>
              <el-radio label="1">液面上</el-radio>
              <el-radio label="2">液面下</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="折射仪刻度值"><el-input v-model="dialogData.zsykdz" disabled></el-input></el-form-item>
          <el-form-item label="化验开始时间"><el-date-picker v-model="dialogData.inspectionStartTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker></el-form-item>
          <el-form-item label="化验结束时间"><el-date-picker v-model="dialogData.inspectionEndTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker></el-form-item>
          <el-form-item label="记录处理时间"><el-date-picker v-model="dialogData.recodeEndTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker></el-form-item>
          <el-form-item label="化检记录人"><el-input v-model="dialogData.inspectionRecodePersonName" disabled></el-input></el-form-item>
          <el-form-item label="记录创建时间"><el-input v-model="dialogData.recodeStartTime" disabled></el-input></el-form-item>
         </el-form> 
         -->
      </div>
   
    </el-dialog>
    <!-- 操作弹出层 -->
    <pdf v-model="ceditDialog" :dateA='searchList.time'></pdf>
  </div>
</template>
<script>
import api from 'plugins/axios/api.js';
import pulpworkInfo from 'views/operationManage/components/pulpworkInfo.vue';
import pdf from 'views/operationManage/components/pdf.vue';

export default {
  name: "sample",
  components:{
      pulpworkInfo,pdf
  },
  
  data(){
    return {
      dialogActiveName:'0',
      codeData17:[],
      codeData12:[],
      codeData18:[],
      codeData20:[],
      codeData21:[],
      /** 搜索*/
      searchList:{
        smallNo:'',/** 小样号*/
        name:'',/** 客户姓名*/
        recodeStatusName:0,
        recodeStatus:0,
        time:this.timestampToTime(new Date(),'yy-mm-dd')/**时间*///'2017-07-12'

      },
      // 操作弹出层
      ceditDialog:false,
      loading:false,/**数据请求中 */
      tableData:[],
      pagination:{/**分页参数 */
        currentPage:1,
        pageSize: 10,
        total:0
      },
      dialog:{/**弹框配置参数 */
        isShow:false,
        title:'详细信息'
      },
      sampleTypeFormat(row, column, cellValue, index){/**格式化小样类型 */
        return cellValue===0?'血浆':(cellValue===1?'血液':'');
      },
      mainActiveName:'0',
      dialogData:{},
    }
  },
  computed:{
    tableHeight(){
      return this.$store.state.clientHeight-184;
    },
    divAutoHeight(){
      return this.$store.state.clientHeight-100;
    },
  },
  created(){
    let self = this;
    api.getCodeData(17).then(res=>{
      self.codeData17=res.content;
    })
    api.getCodeData(12).then(res=>{
      self.codeData12=res.content;
    })
    api.getCodeData(18).then(res=>{
      self.codeData18=res.content;
    })
    api.getCodeData(20).then(res=>{
      self.codeData20=res.content;
    })
    api.getCodeData(21).then(res=>{
      self.codeData21=res.content;
    })
    self.getTableDate();
  },
  mounted(){
  },
  methods: {
    syschRecodeStatus(ins){
      let self = this;
      switch (ins.name) {
        case '1':
          self.searchList.recodeStatus=1;
          self.getTableDate();
          break;
        case '0':
          self.searchList.recodeStatus=0;
          self.getTableDate();
          break;   
        default:
          break;
      }
    },
    setSelectDefuVal(){/**修改dialog数据里面第一次编辑对应四个select默认值显示 */
           let self = this;
           self.dialogData.hbsAg='1';
           self.dialogData.hcv='1';
           self.dialogData.syphilis='1';
           self.dialogData.hiv='1';
    },
    getTableDate(){/**获取表格数据 */
      let self = this,
      getData={
        time:self.timestampToTime(self.searchList.time?self.searchList.time:new Date(),'yy-mm-dd'),
        createTime:self.timestampToTime(self.searchList.time?self.searchList.time:new Date(),'yy-mm-dd'),
        name:self.searchList.name,
        recodeStatus:self.searchList.recodeStatus,
        state:self.searchList.recodeStatus,
        smallNo:self.searchList.smallNo,
        currentPage:self.pagination.currentPage,
        pageSize:self.pagination.pageSize
      };
      self.loading = true;

      // api.samplesList(getData).then(res=>{
      api.queryCheckCaseList(getData).then(res=>{
        
        self.loading=false;
        self.tableData=res.content.records;
        self.pagination.total=res.content.total;
      },error=>{
        self.loading=false;
      })
    },
    searchData(){/**点击搜索 */
      this.pagination.currentPage=1;
      this.getTableDate();
    },
    handleSizeChange(size){/**修改分页显示也是 */
      this.pagination.currentPage=1;
      this.pagination.pageSize=size;
      this.getTableDate();
    },
    handleCurrentChange(current){/**切换分页*/
      this.pagination.currentPage=current;
      this.getTableDate();
    },
    updateDialog(row){/**点击编辑 */
      let self = this;
      self.dialog.isShow = true;
      self.dialogData = row;
      /**格式化dialogData数据 */ 
      self.dialogData.sampleTypeFormatter= row.sampleType===1?'血液':(row.sampleType===0?'血浆':'');
      self.dialogData.wholeBloodLevel = row.wholeBloodLevel===null? '0': String(row.wholeBloodLevel);
      self.dialogData.inspectionResult = row.inspectionResult===null? '0':String(row.inspectionResult);
      self.dialogData.hbsAg = row.hbsAg===null?'0':String(row.hbsAg);
      self.dialogData.hcv = row.hcv===null?'0':String(row.hcv);
      self.dialogData.syphilis = row.syphilis===null?'0':String(row.syphilis);
      self.dialogData.hiv = row.hiv===null?'0':String(row.hiv);
      self.dialogData.alt = row.alt===null? null:(row.alt);
      self.dialogData.bloodType = row.bloodType===null?null:String(row.bloodType);
      self.dialogData.ym = row.ym ===null?'':String(row.ym);
      self.dialogData.gatheringPlaceFormatter = row.gatheringPlace===0?'站内':'站外';
      self.dialogData.authMethodFormatter = row.authMethod == 0 ? '人工认证' : (row.authMethod == 1 ? '人脸识别' : (row.authMethod  == 2 ? '指纹认证' : ""));
      if(self.dialogData.hcv ==null || self.dialogData.hcv ==='0'|| self.dialogData.hcv =="")
      self.setSelectDefuVal();
    },
    submitDialog(){/** 更新后台信息*/
      let self = this;
      self.loading=true;    
      api.updateInnerBlood(self.dialogData).then(res=>{
        self.loading=false;
        self.dialog.isShow=false;
        self.$message.success('信息编辑成功！');
        self.getTableDate();
        // self.dialog1.isShow = false;
      },error=>{
        self.loading=false;
      })
     }
  }
}
</script>
<style lang="stylus" scoped>
  .checkNote{
    width 560px
    background $auxiliary-color1

  }
  .showDataLi{
    width:400px;
    height:200px;
    border:1px solid rgba(0,0,0,0.1);
    background: white;
    box-shadow : 0px 0px 8px rgba(216,216,216,0.9);
    float:left;
    margin-left: 10px;
    margin-top:10px;
    border-radius: 10px;
    overflow-y:hidden;
    cursor:pointer;
  }
  .showDataLi:hover{
    border:1px solid rgba(0,0,0,0.2);
    box-shadow : 0px 0px 13px rgba(0,0,0,0.3);
  }
  
  .showDataTop{
    width:398px;
    height:148px;
  }
  .showDataFoot{
    border-top:1px solid rgba(216,216,216,0.5);
    width:100%;
    height:51px;
    text-align:center;
    line-height:50px;
    background:#F9FAFC;
    font-size:14px;
    color:rgba(0,0,0,0.5);
  }

  .showDataFoot:hover{
      color:#03BC89;
      background:rgba(216,216,216,0.4);
      font-weight:bolder;
  }

  .showDataTopLeft{
    border:0px solid blue;
    width:80px;
    height:82px;
    float:left;
    margin-left:10px;
    margin-top:20px;
    border-radius: 42px;
    overflow-y:hidden;
  }
  .showDataImg{
    width:100%;
    margin-top:-2px;
  }
  .showDataTopCenter{
    width:210px;
    height:100px;
    float:left;
    margin-left:10px;
    margin-top:20px;
  }
  .showDataTopRight{
    width:80px;
    height:148px;
    float:left;
    text-align:center;
  }
  .divTop{
    width:100%;
  }
  .divfooter{
    width:60%;
    height:50px;

  }
</style>



